<template>
  <el-container class="container">
    <el-aside class="aside">
      <Menu></Menu>
    </el-aside>
    <el-container>
      <el-header class="header">
        <Header></Header>
      </el-header>
      <el-main class="main">
        <Main></Main>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import Header from '@/components/layout/header/index.vue'
import Main from '@/components/layout/main/index.vue'
import Menu from '@/components/layout/menu/index.vue'

</script>
<style scoped>
.container {
  width: 100vw;
  height: 100vh;

  .aside {
    width: 160px;
    background-color: blanchedalmond;
  }

  .header {
    height: 60px;
    padding: 0;
    background-color: cornflowerblue;
  }

  .main {
    padding: 10px 10px 0 10px;
    background-color: #F5F7FA;
  }
}
</style>